import React, { Component } from 'react'
import { Button, Form, Input ,Toast} from 'antd-mobile'
import Headers from '../../components/Header/Header.jsx'
import logo from '../../assets/img/login_logo.png'
import './Register.less'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import { getUser,actions } from '../../store/modules/register.js'

 class Register extends Component {
  render() {
    let {user,registerFn:{changeUser,doRegister},history:{push}}=this.props;
    return (
      <div className='register'>
        <Headers title="注册" back ></Headers>
        <div>{JSON.stringify(user)}</div>
        <div className='form'>
          <div className='logo'>
            <img src={logo} alt="" />
            </div>
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input placeholder='请输入手机号' clearable onChange={(e)=>changeUser('phone',e)} />
          </Form.Item>
          <Form.Item label='昵称' name='nickname'>
            <Input placeholder='请输入昵称' clearable onChange={(e)=>changeUser('nickname',e)}/>
          </Form.Item>
          <Form.Item label='密码' name='password'>
            <Input placeholder='请输入密码' clearable type='password'onChange={(e)=>changeUser('password',e)}/>
          </Form.Item>
        </Form>
        <div className='text-center'>
          <Button color="primary" onClick={()=>doRegister(push)}>注册</Button>
        </div>
        </div>
      </div>
    )
  }
 
}

// 取数据
const mapStateToProps=state=>{
  return {
    user:getUser(state)
  }
}
// 取方法
const mapDispatchToProps=dispatch=>{
  return {
      registerFn:bindActionCreators(actions,dispatch)
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(Register)
